@import '../../assets/css/reset.css';
@import '../../assets/css/common.css';
@import '../../assets/css/property.css';
*{
    user-select: none;
}
// 网页头部
.head{
    user-select: none;
    // position: static; /* 静态定位: 就是没有定位 */
    li{
        margin: 0 20px;
        cursor: pointer;
        a{
            color: #fff;
        }
        .a1{
            color: #fff;
        }
    }
    .li1{
        font-size: 16px;
    }
    // 激活效果
    .active{
        // 父级相对定位
        position: relative;
    }
    // 设置伪元素实现激活效果
    .active::after{
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        // 子级绝对定位
        position: absolute;
        top: 41px;
    }
    // 登录按钮样式设置
    .loginBtn{
        color: #fff;
    }
}

// h5粒子效果
.h5canvas{
    position: relative;
    height: 360px;
    #mydiv{
        position: absolute;
        top: -140px;
    }
    // 蒙层
    .banner-mask{
        position: absolute;
        width: 100%;
        height: 360px;
        top: 0px;
        background-color: rgba(0,0,0,.88);
        text-align: center;
        .top-title{
            font-size: 36px;
            color: #fff;
            line-height: 54px;
            padding-top: 142px;
        }
        .top-des{
            color: #fff;
            line-height: 35px;
        }
        .top-case{
            font-size: 16px;
            color: #fff;
            line-height: 26px;
        }
    }
}

// 案例主要内容区
.case-content{
    width: 100%;
    height: 1725px;
    background: #f8f8f8;
    .major{
        padding-top: 30px;
        h2{
            font-size: 16px;
            color: #000;
            span{
                font-size: 12px;
                color: #999;
            }
        }
        .line{
            width: 14px;
            height: 2px;
            background-color: #1271ef;
            margin-top: 5px;
            margin-bottom: 10px;
        }
        .caseList{
            margin-bottom: 18px;
            li{
                width: 354px;
                height: 340px;
                border: 1px solid #eee;
                margin-right: 20px;
                padding: 10px;
                box-sizing: border-box;
                img{
                    width: 334px;
                    height: 145px;
                    margin-bottom: 18px;
                }
                .item-name{
                    font-size: 16px;
                    line-height: 40px;
                    color: #181818;
                }
                .item-cont{
                    font-size: 12px;
                    line-height: 16px;
                    color: #666;
                    margin-bottom: 16px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 4;
                    overflow: hidden;
                }
                .item-bot{
                    span{
                        font-size: 12px;
                        line-height: 32px;
                        color: #1271ef;
                    }
                }
            }
            .li-box{
                width: 354px;
                height:120px ;
                padding-top: 41px;
                margin-bottom:20px ;
                margin-right: 20px;
                box-sizing: border-box;
                background-color: #fff;
                border: none;
                text-align: center;
                .li-img{
                    width: 131px;
                    height: 40px;
                }
            }
        }
        .box-ul{
            margin-bottom: 0px;
        }
    }
}

// 右侧边栏 楼层滚动
.aside{
    position: fixed;
    top: 40%;
    left: 45%;
    margin-left: 600px;  
    width: 72px;
    margin-top: 32px;
    .nav-item{
        position: relative;
        line-height: 40px;
        cursor: pointer;
    }
}